/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: 竖直管道, 管道内水流颜色自定义，长度自定义，高度自定义。
 * CopyRight:
 * 利用整体状态去控制管道是空还是有水流
 **/

import React, {Component} from 'react';
import './index.css';

export default class VerticalPipe extends Component {
    constructor( props) {
        super( props);
        console.log( 'VerticalPipe props,', this.props);
        /*
         * props 参数说明
         * x：相对位置x坐标
         * y: 相对位置y坐标
         * width： 宽度
         * height：高度
         * color: 水流颜色
         * 管道的默认颜色 #949494
         * state状态表示，是否有水流
         * */
        this.state = {
            fill: this.props.fill ? this.props.fill : false,
        };
    }

    render() {
        return (
            <svg className="VerticalPipeBox" label={this.props.label ? this.props.label : 'VerticalPipe'} x={ this.props.x ? this.props.x : '100'} y={ this.props.y ? this.props.y : '10'} width={ this.props.width ? this.props.width : '100'} height={ this.props.height ? this.props.height : '100'}>
                <svg className="VerticalPipeContent" viewBox='0 0 100 100'>
                    <rect x='30%' y='0%' width='40%' height='100%' fill='#949494'>
                    </rect>
                    <g style={{ display: this.state.fill ? 'block' : 'none'}}>
                        <rect x='40%' y='0%' width='20%' height='100%' fill={ this.props.color ? this.props.color : '#1830fb'}>
                        </rect>
                    </g>
                </svg>
            </svg>
        );
    }
}

